<template>
  <div class="index" v-if="show">
    <div>
      <img
        @click="divClick"
        src="../assets/images/历史大灭绝长图.png"
        class="img"
        alt=""
      />
    </div>
    <!--    <div class="div d1" @click="divClick1()"></div>-->
    <!--    <div class="div d2" @click="divClick1()"></div>-->
    <!--    <div class="div d3" @click="divClick1()"></div>-->
    <!--    <div class="div b1" @click="divClick1()"></div>-->
    <!--    <div class="div b2" @click="divClick1()"></div>-->
    <!--    <div class="div b3" @click="divClick1()"></div>-->
  </div>
  <div class="text" v-else>
    <i class="el-icon-circle-close icon" @click="close"></i>
    <div class="t1">
      <div class="item">
        <div class="title">01 第一次大灭绝: 奥陶纪大灭绝</div>
        时间: 古生代奥陶纪(约4.4亿年前) <br />
        灭绝的规模: 85%的现存物种被消灭<br />
        疑似原因或原因: 大陆漂移和随后的气候变化<br />
        已知的第一次大规模物种灭绝事件发生在地质年代的古生代奥陶纪。在地球历史的这个时期，生命正处于早期阶段。第一个已知的生命形式出现在大约36亿年前，但在奥陶纪，更大的水生生命形式已经存在。当时甚至还有一些陆地物种。
        这次大灭绝事件的原因被认为是大陆的转移和剧烈的气候变化。它发生在两波不同的浪潮中。第一次浪潮是包围整个地球的冰河时代。海平面下降，许多陆地物种无法快速适应严酷寒冷的气候。第二次浪潮发生在冰河时代最终结束之时——但也不全是好消息。这段插曲结束得如此突然，以至于海平面上升得太快，无法容纳足够的氧气来维持在第一波浪潮中幸存下来的物种。同样，物种在灭绝之前适应得太慢。然后，只有少数幸存的水生自养生物才能提高氧气水平，这样新物种才能进化。
      </div>
      <div class="item">
        <div class="title">02 第二次大灭绝: 泥盆纪大灭绝</div>
        时间:古生代泥盆纪(约3.75亿年前) <br />
        灭绝的规模:近80%的现存物种被灭绝<br />
        疑似原因或原因:海洋缺氧，空气温度迅速冷却，火山爆发和/或流星撞击<br />
        地球生命史上的第二次大灭绝发生在古生代的泥盆纪。这次大灭绝事件实际上是在上一次奥陶纪大灭绝之后发生的。就在气候稳定下来，物种适应了新的环境，地球上的生命开始再次繁荣时，几乎80%的生物——包括水中和陆地上的生物——都灭绝了。
        关于为什么第二次大灭绝发生在地质历史上的那个时期，有几种假设。第一波浪潮对水生生物造成了重大打击，实际上可能是由于陆地的快速定居——许多水生植物适应了陆地生活，留下更少的自养生物为所有海洋生物创造氧气。这导致了海洋中的大规模生物死亡。
        这些植物迅速迁移到陆地上，也对大气中可用的二氧化碳产生了重大影响。通过如此迅速地移除如此多的温室气体，温度骤降。陆地物种难以适应这些气候变化，因此灭绝了。
        泥盆纪大灭绝的第二波更像是一个谜。它可能包括大规模的火山爆发和一些流星撞击，但确切的原因仍然是未知的。
      </div>
      <div class="item">
        <div class="title">03 第三次大灭绝: 二叠纪大灭绝</div>
        时间:古生代二叠纪(约2.5亿年前) <br />
        灭绝的规模: 85%的现存物种被消灭<br />
        疑似原因或原因:未知——可能是小行星撞击、火山活动、气候变化和微生物<br />
        第三次大灭绝发生在古生代的最后一个时期，称为二叠纪。这是所有已知物种中最大的一次大规模灭绝，地球上96%的物种完全消失了。因此，这次大灭绝被称为“大灭绝”也就不足为奇了。当事件发生时，水生和陆生生物同样迅速消亡。是什么引发了这次最大规模的物种灭绝事件，这在很大程度上仍然是一个谜，研究地质年代这一时间跨度的科学家提出了几个假说。一些人认为可能有一系列事件导致了这么多物种的消失;
        这可能是大规模的火山活动，伴随着小行星撞击，将致命的甲烷和玄武岩送入空气和地球表面。
        这些可能导致氧气减少，使生命窒息，并导致气候迅速变化。最新的研究指出，一种来自古菌领域的微生物在甲烷含量高的时候很活跃。这些极端微生物可能已经“接管”并扼杀了海洋中的生命。
        不管原因是什么，这次最大的大规模灭绝结束了古生代，迎来了中生代。
      </div>
    </div>
    <div class="t1">
      <div class="item">
        <div class="title">04 第四次大灭绝: 三叠纪-侏罗纪大灭绝</div>
        时间:中生代三叠纪末期(约2亿年前) <br />
        灭绝的规模: 85%的现存物种被消灭<br />
        疑似原因或原因:
        玄武岩溢流的大型火山活动、全球气候变化、海洋pH值和海平面变化<br />
        第四次大灭绝实际上是许多较小的灭绝事件的组合，这些事件发生在三叠纪和中生代的最后1800万年。在这段漫长的时间里，当时地球上已知的物种大约有一半灭绝了。
        这些个别的小灭绝的原因，在很大程度上，可以归因于火山活动与玄武岩溢流。火山喷发出的气体也造成了气候变化问题，引起了海平面变化，甚至可能改变了海洋的pH值。
      </div>
      <div class="item">
        <div class="title">05 第五次大灭绝: 白垩纪-第三纪大灭绝</div>
        时间:中生代白垩纪末期(大约6500万年前) <br />
        灭绝的规模:近75%的现存物种被消灭<br />
        疑似原因或原因:极端小行星或流星撞击<br />
        第五次大灭绝也许是最著名的，尽管它不是最大的。白垩纪-第三纪物种灭绝(K-T灭绝)成为中生代末期白垩纪和新生代第三纪的分界线。这也是恐龙灭绝的原因。恐龙并不是唯一灭绝的物种，然而，多达75%的已知现存物种都在这次大灭绝事件中死亡。
        有充分的证据表明，这次大灭绝的原因是一次重大的小行星撞击。巨大的太空岩石撞击地球，并将碎片送入空中，有效地产生了一个“撞击冬天”，彻底改变了整个地球的气候。科学家们研究了小行星留下的大陨石坑，可以追溯到这个时期。
      </div>
      <div class="item">
        <div class="title">06 第六次大灭绝: 正在发生？</div>
        我们有可能处于第六次大灭绝吗?
        许多科学家认为是真的。自从人类进化以来，许多已知的物种已经消失了。由于这些大规模灭绝事件可能持续数百万年，也许我们正在目睹第6次大规模灭绝事件的发生。人类是否能生存下来还有待确定。
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DidOutPages',
  data() {
    return {
      show: true,
    }
  },

  mounted() {},

  methods: {
    divClick() {
      this.show = false
    },
    close() {
      this.show = true
    },
  },
}
</script>
<style lang="scss" scoped>
.index {
  box-sizing: border-box;
  width: 100%;
  padding: 0px 20px 10px;
  overflow-x: auto;
  overflow-y: hidden;
}

.text {
  padding: 10px 20px 0;
  display: flex;
  justify-content: space-between;
  color: #fff;

  .icon {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
    font-size: 40px;
  }

  .t1 {
    width: 45%;

    .item {
      height: 200px;
      margin-bottom: 40px;
    }

    .title {
      font-size: 16px;
      text-align: center;
      font-weight: 700;
    }
  }
}

.img {
  position: relative;
  width: 100%;
  height: 100%;
}

.div {
  width: 280px;
  height: 100px;
  display: inline-block;
  background-color: #fff;
}

.d1 {
  position: absolute;
  left: 17%;
  top: 10%;
}

.d2 {
  position: absolute;
  left: 41%;
  top: 10%;
}

.d3 {
  position: absolute;
  left: 67%;
  top: 10%;
}

.b1 {
  position: absolute;
  left: 30%;
  top: 68%;
}

.b2 {
  position: absolute;
  left: 54%;
  top: 68%;
}

.b3 {
  position: absolute;
  left: 80%;
  top: 68%;
}
</style>
